import {FC,useState} from 'react'

// useState能够在函数组件中'钩入'状态
const UseStateCom:FC<any> = () => {
    // 设置状态的时候一定要传入一个新的状态
    // []中，第一个是值，第二个是个函数
    let [num,setNum] = useState<number>(10)

    let [userInfo,setUserInfo] = useState<{username:string,password:string}>({username:'',password:''})
    // 增加
    const increaseNum = () => {
        setNum(num+1)
    }
    // 减少
    const decreaseNum = () => {
        setNum(num-1)
    }
    return(
        <fieldset>
            <legend>state</legend>
            <button onClick={decreaseNum}>-</button>
            -
            <b>{num}</b>
            -
            <button onClick={increaseNum}>+</button>

            <h1>username:{userInfo.username}</h1>
            <h1>password:{userInfo.password}</h1>
            <button onClick={()=>{
                // setUserInfo({username:'lbw',password:'555'})
                // setUserInfo(Object.assign({},userInfo,{username:'卢本伟'}))
                setUserInfo({...userInfo,username:'刘培茄'})
            }}>登入</button>
        </fieldset>
    )
}
export default UseStateCom